<!-- 商品发布 - 基础设置 -->
<template>
  <el-form ref="formRef" :disabled="isDetail" :model="formData" :rules="rules" label-width="120px">
    <el-form-item label="商品名称" prop="name">
      <el-input
        v-model="formData.name"
        :autosize="{ minRows: 2, maxRows: 2 }"
        :clearable="true"
        :show-word-limit="true"
        class="w-80!"
        maxlength="64"
        placeholder="请输入商品名称"
        type="textarea"
      />
    </el-form-item>
    <el-form-item label="商品分类" prop="categoryId">
      <el-cascader
        v-model="formData.categoryId"
        :options="categoryList"
        :props="defaultProps"
        class="w-80"
        clearable
        filterable
        placeholder="请选择商品分类"
      />
    </el-form-item>
    <el-form-item label="商品品牌" prop="brandId">
      <el-select   style="width: 90%;max-width: 500px;" v-model="formData.brandId" class="w-80" placeholder="请选择商品品牌">
        <el-option
              
          v-for="item in brandList"
          :key="item.id"
          :label="item.name"
          :value="item.id as number"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="商品关键字" prop="keyword">
      <el-input v-model="formData.keyword" class="w-80!" placeholder="请输入商品关键字(多个逗号分开)" />
    </el-form-item>
    <el-form-item label="商品简介" prop="introduction">
      <el-input
        v-model="formData.introduction"
        :autosize="{ minRows: 2, maxRows: 2 }"
        :clearable="true"
        :show-word-limit="true"
        class="w-80!"
        maxlength="128"
        placeholder="请输入商品名称"
        type="textarea"
      />
    </el-form-item>
    <el-form-item label="商品封面图" prop="picUrl">
      <UploadImg v-model="formData.picUrl" :disabled="isDetail" height="80px" />
    </el-form-item>
    <el-form-item label="商品轮播图" prop="sliderPicUrls">
      <UploadImgs @uploadedfilenames="uploadedfilenamest" v-model="formData.sliderPicUrls" :disabled="isDetail"  />
    
    </el-form-item>

    <el-form-item label="商品资质介绍图" prop="images">
      <UploadImgs
      hasName="true" :fileNames="formData.imagesNames"  
        @uploadedfilenames="uploadedfilenames"  v-model="formData.images" :disabled="isDetail" />
    </el-form-item>

    <el-form-item label="商品宣传视频" prop="video">
        <UploadFile
          :disabled="isDetail"
          v-model="formData.video"
          :file-type="['mp4']"
          :limit="1"
        
          class="min-w-80px"
        />
      </el-form-item>
      <el-form-item label="上传视频封面" prop="videoImg">
        <!-- <UploadImg
          v-model="formData.videoImg"
          draggable="false"
          height="80px"
          width="100%"
          class="min-w-80px"
        >
          <template #tip> 建议宽度750 </template>
        </UploadImg> -->
        <UploadImg v-model="formData.videoImg" :disabled="isDetail" height="80px" />
      </el-form-item>
  </el-form>
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { copyValueToTarget } from '@/utils'
import { propTypes } from '@/utils/propTypes'
import { defaultProps, handleTree } from '@/utils/tree'
import type { Spu } from '@/api/mall/product/spu'
import * as ProductCategoryApi from '@/api/mall/product/category'
import { CategoryVO } from '@/api/mall/product/category'
import * as ProductBrandApi from '@/api/mall/product/brand'
import { BrandVO } from '@/api/mall/product/brand'
import { any, string } from 'vue-types'

defineOptions({ name: 'ProductSpuInfoForm' })
const props = defineProps({
  propFormData: {
    type: Object as PropType<Spu>,
    default: () => {}
  },
  isDetail: propTypes.bool.def(false) // 是否作为详情组件
})

const message = useMessage() // 消息弹窗

const formRef = ref() // 表单 Ref

const formData = reactive<Spu>({
  name: '', // 商品名称
  categoryId: undefined, // 商品分类
  keyword: '', // 关键字
  picUrl: '', // 商品封面图
  sliderPicUrls: [], // 商品轮播图
  introduction: '', // 商品简介
  brandId: undefined, // 商品品牌
  video: '',
//视频封面地址
 videoImg : '',
//宣传图片名称

//宣传图片
 

 imagesNames : any,
  //宣传图片
   images: any,
   imagess:any

})
const rules = reactive({
  name: [required],
  categoryId: [required],
  keyword: [required],
  introduction: [required],
  picUrl: [required],
  // sliderPicUrls: [required],
  brandId: [required]
})

/** 将传进来的值赋值给 formData */
watch(
  () => props.propFormData,
  (data) => {
    if (!data) {
      return
    }
    copyValueToTarget(formData, data)
  },
  {
    immediate: true
  }
)

/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
  if (!formRef) return
  try {
    await unref(formRef)?.validate()
    // 校验通过更新数据
    Object.assign(props.propFormData, formData)
  } catch (e) {
    message.error('【基础设置】不完善，请填写相关信息')
    emit('update:activeName', 'info')
    throw e // 目的截断之后的校验
  }
}
defineExpose({ validate })

const uploadedfilenames= (filenames: string[] , value: string[]) => {
   try {
  //  debugger
    console.log("图片上传成功后的》》》",filenames);
     let jjj= filenames.join(",")+"";
     formData.imagesNames=jjj;
     if(value){
      formData.imagess=value.join(",").replaceAll("blob:","");
     console.log(formData.imagesNames,"::::::",value,":::",formData.imagess);
     }
    
   } catch (error) {
    
   }
    
}
const uploadedfilenamest= (filenames: string[] , value: string[]) => {
   try {
    if(value){
     formData.sliderPicUrl=value.join(",").replaceAll("blob:","");
     console.log(formData.sliderPicUrl);
     formData.sliderPicUrls=value;
    }
   } catch (error) {
    
   }
    
}
/** 初始化 */
const brandList = ref<BrandVO[]>([]) // 商品品牌列表
const categoryList = ref<CategoryVO[]>([]) // 商品分类树
onMounted(async () => {
  // 获得分类树
  const data = await ProductCategoryApi.getCategoryList({})
  categoryList.value = handleTree(data, 'id')
  // 获取商品品牌列表
  let lists = await ProductBrandApi.getSimpleBrandList()
  
  lists = lists.map(item => {
  let newItem = { ...item };
  newItem['id'] = newItem['brandId'];
  delete newItem['brandId'];
  newItem['name'] = newItem['brandName'];
  delete newItem['brandName'];
  return newItem;
});
     brandList.value=lists;
})
</script>
